<template>
  <div class="order-detail">

    <el-card shadow="never" style="margin: 30px">
      <div slot="header">
        <el-steps style="width: 80%;margin: 0 auto;" :active="orderState+1">
          <el-step title="待付款" :description="orderBase.paymentTime" />
          <el-step title="待发货" />
          <el-step title="已发货" />
          <el-step title="确认收货" />
          <el-step title="关闭" />
        </el-steps>
      </div>
      <!-- card body -->
      <!-- 订单信息开始 -->
      <div class="order-base-section">
        <div class="order-title">
          <span class="title-text">订单信息:</span>
          <span class="order-status-text">待发货</span>
        </div>
        <div class="base-info-detail">
          <!-- 栅格化布局 -->
          <el-row :gutter="20">
            <el-col :span="6" :offset="0">
              <p>订单金额: <span style="color: red;">0</span></p>
            </el-col>
            <el-col :span="6" :offset="0">
              <p>订单编号: <span style="color:orange;">{{ orderBase.orderSn }}</span></p>
            </el-col>
            <el-col :span="6" :offset="0">
              <p>订单编号: <span>878399905734070272</span></p>
            </el-col>
            <el-col :span="6" :offset="0">
              <p>订单编号: <span>878399905734070272</span></p>
            </el-col>
            <el-col :span="6" :offset="0">
              <p>订单编号: <span>878399905734070272</span></p>
            </el-col>
            <el-col :span="6" :offset="0">
              <p>订单编号: <span>878399905734070272</span></p>
            </el-col>
            <el-col :span="6" :offset="0">
              <p>订单编号: <span>878399905734070272</span></p>
            </el-col>
          </el-row>
        </div>
      </div>
      <el-divider />
      <!-- 订单信息结束 -->
      <!-- 收货人信息开始 -->
      <div class="send-base-section">
        <div class="order-title">
          <span class="title-text">收货人信息:</span>
        </div>
        <div class="base-info-detail">
          <!-- 栅格化布局 -->
          <el-row :gutter="20">
            <el-col :span="6" :offset="0">
              <p>收货人姓名: <span style="color: orange;">{{ orderBase.receiverName }}</span></p>
            </el-col>
            <el-col :span="6" :offset="0">
              <p>订单编号: <span>878399905734070272</span></p>
            </el-col>
            <el-col :span="6" :offset="0">
              <p>订单编号: <span>878399905734070272</span></p>
            </el-col>
            <el-col :span="6" :offset="0">
              <p>订单编号: <span>878399905734070272</span></p>
            </el-col>
          </el-row>
        </div>
      </div>
      <el-divider />
      <!-- 收货人信息结束 -->
      <!-- 商品详情 -->
      <div class="product-base-section">
        <div class="order-title">
          <span class="title-text">商品详情:</span>
        </div>
        <div class="base-info-detail">
          <el-table :data="orderItems" border stripe>
            <el-table-column
              type="index"
              label="#"
              :width="50"
            />
            <el-table-column
              prop="productName"
              label="商品名称"
              :width="180"
            />
            <el-table-column
              label="商品图片"
              :width="200"
            >
              <template slot-scope="scope">
                <img :src="scope.row.productPic" style="width:100px;height: 100px;" alt="">
                <!-- 如果存在returnId说明申请了退货 -->
                <router-link v-if="scope.row.returnId" style="color:red;" :to="{name: 'orderBackDetail',params: {id: scope.row.returnId}}">退货</router-link>
              </template>
            </el-table-column>
            <el-table-column
              prop="productBrand"
              label="品牌名称"
              :width="200"
            />
            <el-table-column
              prop="productQuantity"
              label="购买数量"
              :width="100"
            />
            <el-table-column
              prop="productPrice"
              label="价格"
              :width="200"
            />
            <el-table-column
              fixed="right"
              prop="totalPrice"
              label="小计"
              :width="200"
            />
          </el-table>
        </div>
      </div>
      <el-divider />
      <!-- 费用信息详情 -->
      <div class="fee-base-section">
        <div class="order-title">
          <span class="title-text">费用信息:</span>
        </div>
        <div class="base-info-detail">
          <el-row :gutter="20">
            <el-col :span="6" :offset="0">
              <p>实际金额: <span style="color: red;">{{ orderBase.payAmount | money }}</span></p>
            </el-col>
            <el-col :span="6" :offset="0">
              <p>订单总金额:<span style="color: orange;">{{ orderBase.totalAmount | money }}</span></p>
            </el-col>
            <el-col :span="6" :offset="0">
              <p>运费金额:0</p>
            </el-col>
            <el-col :span="6" :offset="0">
              <p>促销优化金额:0</p>
            </el-col>
          </el-row>

        </div>
      </div>
      <el-divider />
      <!-- 操作 -->
      <div class="button-group" style="text-align: center;">
        <!-- 只有状态为1 已支付  才可以出现确认发货按钮 -->
        <el-button v-if="orderState === 1" type="primary" size="default" @click="sendConfirm">确认发货</el-button>
        <el-button v-if="orderState === 3" type="primary" size="default" @click="finishOrder">关闭订单</el-button>
        <!-- 这个按钮用于当前订单所有的商品都被退货的情况下出现 -->
        <el-button v-if="isReceiveForce" type="primary" size="default" @click="receiveProductForce">强制确认收货</el-button>

      </div>
    </el-card>

  </div>
</template>

<script>
import { orderDetail as orderDetailApi,
  sendDone as sendDoneApi,
  finishOrder as finishOrderApi } from '@/api/order'
import { receiveProductsForce as receiveProductsForceApi } from '@/api/order/orderBack'
export default {
  name: 'OrderDetail',
  components: {

  },
  data() {
    return {
      orderId: '',
      step: 1,
      orderBase: {}, // 订单的基本信息
      orderItems: [] // 订单的商品列表
    }
  },
  computed: {
    // 订单状态
    orderState() {
      return this.orderBase.status
    },
    // 用于判断是否需要强制退货
    isReceiveForce() {
      // 1. 订单状态为2
      // 2. 所有的商品都被退货
      // 找到是否存在 没有returnId的item,如果有一个则为false,否则为true
      // 假设都退款了
      var flag = true
      for (var i = 0; i < this.orderItems.length; i++) {
        // 如果有一个没有returnId 说明没退货
        if (!this.orderItems[i].returnId) {
          flag = false
          break
        }
      }

      return this.orderBase.status === 2 && flag
    }
  },
  created() {
    // 获取传递的订单id
    this.orderId = this.$route.params.id
    // 因为需要先获取orderId,再调用方法
    this.getOrderInfos(this.orderId)
  },
  mounted() {

  },
  methods: {
    getOrderInfos(orderId) {
      orderDetailApi(orderId)
        .then(res => {
          const { success, data, message: errMsg } = res
          if (success) {
            const { orderDetail } = data
            this.orderBase = orderDetail.orderBase
            this.orderItems = orderDetail.orderItems
          } else {
            this.$message.error(errMsg)
          }
        })
    },
    // 确认发货
    sendConfirm() {
      // 执行发送
      var sendData = { orderId: this.orderId, deliverySn: '41010108888', deliveryCompany: '顺丰' }
      sendDoneApi(sendData)
        .then(res => {
          const { success, message: errMsg } = res
          if (success) {
            this.$message.success('已修改为已发货状态!')
            // 为了更新当前页面,可以采用重新加载页面
            // window.location.reload();
            // 或者重新获取订单状态
            this.getOrderInfos(this.orderId)
          } else {
            this.$message.error(errMsg)
          }
        })
    },
    // 关闭订单. 后台需要手动关闭订单,使订单进入历史订单和结算流程.
    finishOrder() {
      finishOrderApi(this.orderId)
        .then(res => {
          const { success, message: errMsg } = res
          if (success) {
            this.$message.success('订单已关闭!')
            this.getOrderInfos(this.orderId)
          } else {
            this.$message.error(errMsg)
          }
        })
    },
    // 强制确认收货
    receiveProductForce() {
      receiveProductsForceApi(this.orderId)
        .then(res => {
          const { success, message: errMsg } = res
          if (success) {
            this.$message.success('已强制确认收货!')
            this.getOrderInfos(this.orderId)
          } else {
            this.$message.error(errMsg)
          }
        })
    }
  }
}
</script>

<style scoped lang="scss">
  .order-detail{
    .order-title{
      margin: 20px 0;
      .title-text{
        font-size: 20px;
        font-weight: 800;
      }
      .order-status-text{
        color: orange;
        margin-left: 20px;
      }
    }
  }

</style>
